<template>
  <el-dialog
  title="题目预览"
  :visible="showdialog"
  width="50%"
  @close="dialogClose"
 >
  <!-- <template #default="scope"> -->
 <el-row >
  <el-col :span="6"><div >【题型】:{{ formatQuestionType(dataLista.questionType)}}</div></el-col>
  <el-col :span="6"><div >【编号】:{{dataLista.id}}</div></el-col>
  <el-col :span="6"><div >【难度】:{{formatDifficulty(dataLista.difficulty)}}</div></el-col>
  <el-col :span="6"><div >【标签】:{{dataLista.tags}}</div></el-col>
</el-row>
<el-row >
  <el-col :span="6"><div >【学科】:{{dataLista.subjectName}}</div></el-col>
  <el-col :span="6"><div >【目录】:{{dataLista.directoryName}}</div></el-col>
  <el-col :span="6"><div >【方向】:{{dataLista.direction}}</div></el-col>
</el-row>
<hr>
<div>【题干】:</div>
<div v-html="dataLista.question">
</div>
  <!-- 单选 -->
  <div v-if="dataLista.questionType === '1'">
    <el-radio
    false-label=disabled
    v-model="radio"
     :label="item.isRight"
     v-for="(item,index) in dataLista.options"
     :key="index"
     style="display:block">{{item.title}}</el-radio>
  </div>

  <!-- 多选 -->
  <div v-else-if="dataLista.questionType === '2'">
      <el-checkbox-group v-model="checkList">
        <el-checkbox
        false-label=disabled
        :label="item.isRight"
        v-for="(item,index) in dataLista.options"
        :key="index"
        style="display:block">{{item.title}}</el-checkbox>
      </el-checkbox-group>
  </div>

<hr>
<div>【参考答案】: <el-button type="danger" @click="anTv">视频答案预览</el-button></div>

    <video v-show="showTv" id="myVideo" controls preload="auto" class="video-js" width="300">
   <source
          :src="dataLista.videoURL"
          type="video/mp4"
     ></video>

<hr>
<div >【答案解析】:</div>
<div v-html="dataLista.answer"></div>
<hr>
<div>【题目备注】:{{dataLista.remarks}}</div>
  <!-- </template> -->
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogClose"
    style="color: #fff;
    background-color: #409eff;
    border-color: #409eff;"
    >关 闭</el-button>

  </span>
</el-dialog>
</template>

<script>
export default {
  props: {
    showdialog: {
      type: Boolean,
      default: false
    },
    dataLista: Object
  },
  data () {
    return {
      checkList: [1], // 多选
      radio: 1, // 单选
      showTv: false,
      notSupportedMessage: '此视频暂无法播放，请稍后再试' // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
    }
  },
  methods: {
    // 题型
    formatQuestionType (type) {
      // 根据源数据经过处理 把处理之后的数据返回
      // 定义一个映射结构
      // {1::'正式', 0:'非正式'}
      const map = {
        1: '单选',
        2: '多选',
        3: '简答'

      }
      return map[type]
    }, //   难度
    formatDifficulty (type) {
      // 根据源数据经过处理 把处理之后的数据返回
      // 定义一个映射结构
      // {1::'正式', 0:'非正式'}
      const map = {
        1: '简单',
        2: '中度',
        3: '困难'
      }
      return map[type]
    },
    // 点击答案按钮
    anTv () {
      if (this.showTv === false) {
        this.showTv = true
      } else {
        this.showTv = false
      }
    },
    // 点击关闭子传父
    dialogClose () {
    //   console.log(123)
      this.$emit('dialogVisible')
    }
  }
}
</script>

<style>

</style>
